<template>
  <div class="list">
    <a-button type="primary" class="base-mb10" @click="openModal">+ {{ $t('self.businessCharging.tips19') }}</a-button>

    <a-form
        ref="searchFormRef"
        class="search-form base-mb15"
        :model="searchFormState"
        @finish="onSearchFinish"
    >
      <a-row :gutter="[10, 24]">
        <a-col :span="5">
          <a-form-item name="pileName" :label="$t('self.businessCharging.tips1')">
            <a-input allow-clear v-model:value="searchFormState.pileName" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item name="pileSeri" :label="$t('self.businessCharging.tips2')">
            <a-input allow-clear v-model:value="searchFormState.pileSeri" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item name="pileType" :label="$t('self.businessCharging.tips3')">
            <a-select v-model:value="searchFormState.pileType" :options="[
                { label: $t('self.businessCharging.types.tips1'), value: 1 },
                { label: $t('self.businessCharging.types.tips2'), value: 2 },
            ]" :placeholder="$t('self.pleaseChoose')" />
          </a-form-item>
        </a-col>
        <!-- 其他表单项 -->
        <a-col class="base-flex base-rows">
          <a-button type="primary" html-type="submit">{{ $t('self.searchButton') }}</a-button>
          <a-button class="base-ml10" @click="resetSearchForm">{{ $t('self.resetButton') }}</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-row :gutter="[40, 40]" class="list-wrapper">
      <a-col :span="8" v-for="(item, index) in list" :key="index">
        <a-card hoverable>
          <div class="body-wrapper">
            <div class="base-flex base-rows base-align-items-center base-space-between">
              <div class="base-flex base-rows base-align-items-center">
                <div class="label"><img src="@/assets/stationLogo.png"></div>
                <div class="name"> {{ item.pileName }}</div>
              </div>
            </div>
            <div class="base-flex base-rows base-align-items-center base-mt10">
              <div class="label">{{ $t('self.businessCharging.tips5') }}：</div>
              <div class="val">{{ item.pileSeri }}</div>
            </div>
            <div class="base-flex base-rows base-space-between base-mt10" v-for="(gun, ii) in item.gunList" :key="ii">
              <div class="base-flex base-rows base-align-items-center">
                <div class="label">{{ gun.gunNo == '1'?'A':'B' }}: {{ $t('self.businessCharging.tips6') }}</div>
                <div class="val">{{ gun.gunCode }}</div>
              </div>
			  
			  
              <edit-outlined key="edit" @click="openModalGun(gun, ii)" />
			  
			  
              <div class="base-flex base-rows base-align-items-center">
                <template v-if="gun.status === 0">
                  <sc-status-indicator type="grey"></sc-status-indicator>
                  <span class="base-ml5">{{ $t('self.businessCharging.states.tips1') }}</span>
                </template>
                <template v-if="gun.status === 1">
                  <sc-status-indicator type="warning"></sc-status-indicator>
                  <span class="base-ml5">{{ $t('self.businessCharging.states.tips2') }}</span>
                </template>
                <template v-if="gun.status === 2">
                  <sc-status-indicator type="warning"></sc-status-indicator>
                  <span class="base-ml5">{{ $t('self.businessCharging.states.tips3') }}</span>
                </template>
                <template v-if="gun.status === 3">
                  <sc-status-indicator type="success"></sc-status-indicator>
                  <span class="base-ml5">{{ $t('self.businessCharging.states.tips4') }}</span>
                </template>
                <template v-if="gun.status === 4">
                  <sc-status-indicator type="primary"></sc-status-indicator>
                  <span class="base-ml5">{{ $t('self.businessCharging.states.tips5') }}</span>
                </template>
                <template v-if="gun.status === 5">
                  <sc-status-indicator type="success"></sc-status-indicator>
                  <span class="base-ml5">{{ $t('self.businessCharging.states.tips6') }}</span>
                </template>
                <template v-if="gun.status === 6">
                  <sc-status-indicator type="success"></sc-status-indicator>
                  <span class="base-ml5">{{ $t('self.businessCharging.states.tips9') }}</span>
                </template>
                <template v-if="gun.status === 7">
                  <sc-status-indicator type="primary"></sc-status-indicator>
                  <span class="base-ml5">{{ $t('self.businessCharging.states.tips8') }}</span>
                </template>
              </div>
            </div>
          </div>
          <template #actions>
            <edit-outlined key="edit" @click="openModal(item, index)" />
            <upload-outlined key="upload" @click="openModalImgRef(item, index)" />
            <a-popconfirm
                :title="$t('self.confirmDelete')"
                :ok-text="$t('self.yesTxt')"
                :cancel-text="$t('self.noTxt')"
                @confirm="handleDelete(item, index)"
            >
              <DeleteOutlined key="delete" />
            </a-popconfirm>
          </template>
        </a-card>
      </a-col>
    </a-row>

    <div class="base-flex base-align-items-center base-justify-content-center base-mt40" v-if="list.length">
      <a-pagination show-quick-jumper show-size-changer :page-size-options="['12', '16', '20', '24']" v-model:current="pagination.current" :page-size="pagination.pageSize" :total="pagination.total" @change="onChangePaginationPage" @showSizeChange="onChangePaginationShowSize"></a-pagination>
    </div>

    <editModal ref="modalRef" @ok="getList(true)" @close=""></editModal>
    <gunModal ref="gunModalRef" @ok="getList(true)" @close=""></gunModal>
    <editModalImg ref="modalImgRef" @ok="" @close=""></editModalImg>
    
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import editModal from './edit_modal.vue'
import gunModal from './gun_modal.vue'
import editModalImg from './edit_modalimg.vue'
import { useRoute, useRouter } from 'vue-router'
import { mainStore } from '@/stores/mainStore'

const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $API = proxy.$API
const $T = proxy.$t
const route = useRoute()
const router = useRouter()
const useMainStore = mainStore()
const list = ref([])
const pagination = ref({
  total: 0,
  current: 1,
  pageSize: 12
})

onMounted(async () => {
  if (!route.query.stationId) {
    message.error($T('self.message.error'))
    setTimeout(() => {
      router.go(-1)
    })
    return
  }
  searchFormState.value.stationId = route.query.stationId
  getList()
})

const searchFormRef = ref(null)
const searchFormState = ref({
  stationId: 0,
  pileName: '',
  pileSeri: '',
  pileType: null,
  pileState: null,
})

const getList = (refresh = false) => {
  if (refresh) {
    pagination.value.current = 1
  }
  let params = {
    ...searchFormState.value,
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }
  params = $TOOL.array.cleanParams(params)

  $API.backend.businessCharging.list.post(params).then(res => {
    const { objData } = res
    list.value = objData.data
    Object.assign(pagination.value, {
      current: objData.pageNo,
      pageSize: objData.pageSize,
      total: objData.totalCount
    })
  }).catch(err => {
    message.error(err.msg);
  })
}

const onChangePaginationPage = (pageNumber, pageSize) => {
  pagination.value.current = pageNumber
  getList()
}

const onChangePaginationShowSize = (current, size) => {
  pagination.value.current = current
  pagination.value.pageSize = size
}

const onSearchFinish = (values) => {
  pagination.value.current = 1
  getList()
}

const resetSearchForm = () => {
  searchFormRef.value.resetFields()
}

const modalRef = ref(null)
const openModal = (record, index) => {
  console.log("record===================",record)
  if (index !== undefined) {
    nextTick(() => {
      modalRef.value.edit(record)
    })
  } else {
    modalRef.value.add(searchFormState.value.stationId)
  }
}

const modalImgRef = ref(null)
const openModalImgRef = (record, index) => {
  if (index !== undefined) {
    nextTick(() => {
      modalImgRef.value.edit(record)
    })
  } else {
    modalImgRef.value.add(searchFormState.value.stationId)
  }
}

const gunModalRef = ref(null)
const openModalGun = (record, index) => {
  nextTick(() => {
      gunModalRef.value.edit(record);
  });
};

const handleDelete = (record, index) => {
  $API.backend.businessCharging.delete.post({
    id: record.id
  }).then(() => {
    message.success($T('self.message.success'))
    getList()
  }).catch(err => {
    message.error(err.msg);
  })
}
</script>

<style lang="scss" scoped>
.list {
  height: 100%;
  background: #ffffff;
  padding: 15px;

  .search-form {
    padding: 16px;
    background: rgb(247, 248, 250);

    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
  }
  .list-wrapper {
    .body-wrapper {
      height: 145px;
    }
    img {
      width: 40px;
      height: 40px;
    }
    .label {
      width: 130px;
      text-align: right;
      margin-right: 10px;
    }
  }
}
</style>
